<template>
  <a-modal
    width="500px"
    :title="$t('all.autotext1845')" 
    :visible="visible"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="账号" prop="receiverId">
        <a-select :options="memberOptions" v-model="form.receiverId" />
      </a-form-model-item>
      <a-form-model-item label="姓名">
        <span>{{ getName }}</span>
      </a-form-model-item>
      <a-form-model-item label="项目角色">
        <span>{{ getRoleName }}</span>
      </a-form-model-item>
      <a-form-model-item label="分配中心" prop="researchList">
        <a-select :options="centerOptions" v-model="form.researchList" mode="multiple" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { memberList, transfer } from '@/api/overview/member'


export default {
  name: 'transfer-modal',
  computed: {
    memberOptions () {
      return this.userList?.filter((e) => e.roleCode === this.roleCode && e.userId !== this.userId)?.map((e) => ({ value: e.userId, label: e.account })) ?? []
    },
    centerOptions () {
      return this.mainInfo.proManageResearches?.map((e) => ({ value: e.id, label: `${e.researchCenterNo} - ${e.orgName}` }))
    },
    getAccount () {
      return this.userList?.find((e) => e.userId === this.form.receiverId)?.account ?? '-'
    },
    getName () {
      return this.userList?.find((e) => e.userId === this.form.receiverId)?.name ?? '-'
    },
    getRoleName () {
      return this.userList?.find((e) => e.userId === this.form.receiverId)?.roleName ?? '-'
    },
    researchName () {
      const researchNames = this.form.researchList?.map(id => {
        const matchResearch = this.mainInfo.proManageResearches.find(item => id === item.id)
        if (id && matchResearch.id) {
          return `${matchResearch.researchCenterNo} - ${matchResearch.orgName}`
        }
      })
      return researchNames ? researchNames.join(', ') : ''
    }
  },
  props: {
    userId: Number,
    roleCode: String
  },
  data () {
    return {
      visible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      userList: [],
      centerInList: [],
      proId: '',
      form: {
        receiverId: '',
        researchList: []
      },
      mainInfo: {},
      sysAdmin: {},
      rules: {
        receiverId: [{ required: true, message: '请选择移交账号', trigger: 'change' }],
        researchList: [{ required: true, message: '请选择分配中心', trigger: 'change' }]
      }
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  methods: {
    open (data) {
      const { mainInfo, sysAdmin } = data
      this.visible = true
      this.mainInfo = mainInfo
      this.sysAdmin = sysAdmin
      this.getMemberList()
      // this.getCenterList()
    },
    getMemberList () {
      memberList({ proId: this.proId, pageSize: 100, pageNumber: 1 }).then((res) => {
        this.userList = res.content ?? []
      })
    },
    // getCenterList () {
    //   centerList({ proId: this.proId, pageSize: 100, pageNumber: 1 }).then((res) => {
    //     this.centerInList = res.content ?? []
    //   })
    // },
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$confirm({
            title: this.$t('all.autotext1845'),
            // content: h => <div>是否确认移交</div>,
            content: `是否确认移交【${this.sysAdmin.account}-${this.sysAdmin.name}-${this.mainInfo.roleName}】的${this.researchName ? `【${this.researchName}】` : ''}权限和申请单到【${this.getAccount}-${this.getName}-${this.getRoleName}】`,
            onOk: () => {
              transfer({ proId: this.proId, transferId: this.userId, ...this.form }).then((res) => {
                this.$message.success('操作成功')
                this.handleCancel()
                window.location.reload()
              })
            },
            onCancel () {}
          })
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.mainInfo = {}
      this.sysAdmin = {}
      this.$refs.ruleForm.resetFields()
    }
    
  }
}
</script>

<style scoped lang="less">
</style>
